<template>
	<a-modal footer="" :maskClosable="false" title="详情" :width="840" :visible="showModal"
		:confirm-loading="confirmLoading" :ok-type="'primary'" @ok="confirmOk" @cancel="cancel">
		<a-form :form="form">
			<section class="p-10 pl-24" style="background: #f0f0f0;">
			  基础信息
			</section>
			<section class="flex flex-wrap mt-10 pl-24">
			 <div class="mb-10" style="width: 50%;">订单号：{{details.orderId}}</div>
			 <div class="mb-10" style="width: 50%;">订单状态：{{details.orderStatusDesc}}</div>
			 <div  class="mb-10" style="width: 50%;">预定渠道：{{details.channelName}}</div>
			  <div  class="mb-10" style="width: 50%;">渠道订单号：{{details.channelOrderNo}}</div>
			<div class="mb-10" style="width: 50%;">承租人：{{details.travellerName}}</div>
			<div class="mb-10" style="width: 50%;">联系电话：{{details.phone}}</div>
			<div  class="mb-10" style="width: 50%;">费用生成时间：{{details.createTime}}</div>
			 <div  class="mb-10" style="width: 50%;">线上费用类型：{{order.feeDesc}}</div>
			 <div class="mb-10" style="width: 50%;">线上费用金额：{{details.amount}}</div>
			 <div class="mb-10" style="width: 50%;">对账状态：{{order.finished?'已对账':'待对账'}}</div>
			 <div  class="mb-10" style="width: 50%;">取车城市：{{details.pickupCityName}}</div>
			  <div  class="mb-10" style="width: 50%;">还车城市：{{details.returnCityName}}</div>
			  <div class="mb-10" style="width: 50%;">取车时间：{{details.pickupTime}}</div>
			  <div class="mb-10" style="width: 50%;">还车时间：{{details.returnTime}}</div>
			  <div  class="mb-10" style="width: 50%;">车型：{{details.vehicleDesc}}</div>
			   <div  class="mb-10" style="width: 50%;">车牌：{{details.plateNum}}</div>
			</section>
			
			
			
		<section class="p-10 pl-24" style="background: #f0f0f0;">
		  其他信息
		</section>
			<section class="flex flex-wrap mt-10 pl-24">
			 <div class="mb-10" style="width: 50%;">对账人：{{details.updateName}}</div>
			 <div class="mb-10" style="width: 50%;">对账时间：{{details.createTime}}</div>
			 <div  class="mb-10" style="width: 50%;">修改人：{{details.updateName}}</div>
			  <div  class="mb-10" style="width: 50%;">修改时间：{{details.updateTime}}</div>
			  
			</section>
			
		</a-form>
	</a-modal>
</template>

<script>
		import {getReconcileDetail} from '@/api/order/channelReconciliation'
	// import {directConnection } from '@/api/geography'
	// import {
	// 	getActivityRelationVendor,getActivityUnbindVendor,getPageActivityDetail,getActivityBindVendor
	// } from '@/api/operationInfo/channel'
	import moment from 'moment'

	export default {
		props: {
			id: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
			    loading: false,
				showModal:false,
				data:[],
				total:0,
				order:{},
				details:{},
			
				rowsNum:5
				
			}
		},
		
		methods: {
			getDetails() {
						
			  this.loading = true
			  getReconcileDetail({id:this.order.id}).then(data => {
			    this.details = data
			 
			  }).catch(err => {
			  }).finally(() => this.loading = false)
			},
			
			
			cancel(){
				this.showModal = false
			},
			open(data){
				this.order=data
				this.showModal = true
				
				this.getDetails()
			},
		},
	}
</script>

<style lang="less" scoped>
	/deep/.ant-modal-body{
		padding-left: 0;
		padding-right:0
		
	}
	.upload-list {
		/deep/ .ant-form-item-label {
			height: 30px;
			line-height: normal;
		}
	}
</style>